<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimum-scale=1.0" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>输入信息</title>
		<link href="css/common.css" rel="stylesheet" type="text/css" />
		<link href="css/style.css" rel="stylesheet" type="text/css">
		<link href="css/selectFilter.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="js/rem.js"></script>
		<style>
			.input-title {
				margin-top: 0.1rem;
				font-size:0.28rem;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(34,34,34,1);
				line-height:0.4rem;
				margin-bottom: 0.16rem;
			}
			.input-box {
				width: 100%;
				height:0.72rem;
				padding: 0 0.24rem;
				font-size: 0.28rem;
				background:rgba(255,255,255,1);
				border-radius:0.08rem;
				border:1px solid rgba(0,0,0,0.2);
				margin-bottom:0.2rem;
			}
			.location-btn-wrapper {
				width: 100%;
				height:1.69rem;
				background:rgba(255,255,255,1);
				border-radius:0.08rem;
				border:1px dashed rgba(0,0,0,0.2);
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			.location-btn {
				font-size: 0.34rem;
				color: #1583FF;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.location-btn-text {
				margin-top: 0.25rem;
				height:0.33rem;
				font-size:0.24rem;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(136,136,136,1);
				line-height:0.33rem;
			}
			.next-btn {
				width:4.8rem;
				height:0.88rem;
				background:rgba(21,131,255,1);
				border-radius:58px;
				text-align: center;
				font-size:0.34rem;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(255,255,255,1);
				line-height:0.88rem;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<!-- 标题栏 -->
		<div class="app-nav">
			<text class="app-nav-title">标题</text>
		</div>
		<div class="app-header">
			<div class="header-step">01</div>
			<div class="header-title">输入信息</div>
		</div>
		
		<div class="app-content-wrapper">
			<div class="app-content">
				<div class="input-title">请选择检查类型</div>
				<div class="filter-box" style="margin-bottom: 0.2rem;">
					<div class="filter-text">
						<input class="filter-title" type="text" readonly placeholder="请选择" />
						<i class="icon-line-down icon-filter-arrow"></i>
					</div>
					<select name="filter">
						<option value="1" selected>住宅小区</option>
						<option value="2">小场所（不住人）</option>
						<option value="3">小场所（住人）</option>
					</select>
				</div>
				<div class="input-title">被检查地点</div>
				<input class="input-box" placeholder="请输入"/>
				<div class="input-title">负责人</div>
				<input class="input-box" placeholder=""/>
				<div class="input-title">负责人电话</div>
				<input class="input-box" placeholder=""/>
				<div class="input-title">所在地址</div>
				<div class="location-btn-wrapper">
					<div class="location-btn">
						<span class="icon-address "></span>
						<span class="location-btn-text">点击获取你的位置</text>
					</div>
				</div>	
			</div>
			<div class="bottom-btn-wrapper">
				<div class="next-btn">下一步</div>
			</div>
			
		</div>

		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/selectFilter.js"></script>
		<script type="text/javascript">
	
			$('.filter-box').selectFilter({
				callBack : function (val){
					//返回选择的值
					console.log(val+'-是返回的值')
				}
			});
		</script>
	</body>
</html>
